<template>
  <div class="fileDemo-comp-ct">
    <mt-header title="fileDemo" fixed>
      <mt-button icon="back" @click="$router.back(-1)" slot="left">返回</mt-button>
    </mt-header>
    <div class="container">
      <h4>app_data_path_new</h4>
      <hr />
      <ul>
        <li v-for="(item,idx) of infoList" :key="idx" class="path_li">{{item.key}} : {{item.val}}</li>
      </ul>
      <hr />
      <input type="text" v-model="imgpath">
      <hr />
      <mt-button type="primary" size="large" @click="getFile_info" class="c_button">getFile_info</mt-button>
      <mt-button type="primary" size="large" @click="newFile" class="c_button">new_file</mt-button>
      <mt-button type="primary" size="large" @click="readFile" class="c_button">read_file</mt-button>
      <mt-button type="primary" size="large" @click="download" class="c_button">download</mt-button>
      <mt-progress :value="progress" v-show="downloading">
        <div slot="end">{{progress}}%</div>
      </mt-progress>
      <mt-button type="danger" size="large" @click="goFileBrowser" class="c_button">goFileBrowser</mt-button>
      <hr>
      <!-- <mt-button type="primary" size="large" @click="testProgress" class="c_button">testProgress</mt-button> -->
    </div>
  </div>
</template>
<script>
import FileUtil from "@/cordova_plugins/FileUtil.js";
export default {
  name: "fileDemo",
  data() {
    return {
      infoList: [{ key: "test", val: "hellow" }],
      imgpath:'http://attach.bbs.miui.com/forum/201309/22/091859fn50qaodhhqz1qhi.jpg',
      progress:0,
      downloading:false,
      timer:false,
      fileList:[]
    };
  },
  methods: {
    newFile() {
      FileUtil.writeToFile("test.txt", "myfirst file 44444444444444");
    },
    readFile() {
      FileUtil.readFiletoStr("test.txt");
    },
    isFile(){
      alert('building')
    },
    goFileBrowser(){
      this.pushPage('./fileBrowser')
    },
    getFile_info() {
      if (this.GLOBAL.plusReady) {
        let templist = [];
        templist.push({
          key: "applicationDirectory",
          val: cordova.file.applicationDirectory
        });
        templist.push({
          key: "applicationStorageDirectory",
          val: cordova.file.applicationStorageDirectory
        });
        templist.push({
          key: "dataDirectory",
          val: cordova.file.dataDirectory
        });
        templist.push({
          key: "cacheDirectory",
          val: cordova.file.cacheDirectory
        });
        this.infoList = templist;
      }
    },
    download(){
      let url = this.imgpath
      FileUtil.openRoot((fs)=>{
        let filename = url.substr((url.lastIndexOf('/')+1))
        
        //新建文件
        FileUtil.createFile(fs.root,filename,(fe)=>{
          //调用下载
          this.downloading = true
          this.progress = 0
          FileUtil.downloadFile(url,fe,this.onProgress,(fdata)=>{
            this.downloading = false
             //处理获取到的数据
             let fpatch = fe.toURL()
             console.log(fpatch);
             console.log(fdata);
             
             //通过对话框打开文件
             FileUtil.openFile(fpatch,fdata.type)
          })
        })
      })
    },
    onProgress(e){
      //下载进度条
      if (e.lengthComputable) {
        // console.log("当前进度："+e.loaded / e.total);
        this.progress = Math.round((e.loaded / e.total)*100)
      }
    },
    testProgress(){
      if(!this.timer){
        this.progress = 0
        this.downloading = true
        this.timer = setInterval(()=>{
           if(this.progress==100){
             window.clearInterval(this.timer)
             this.timer = false
             this.downloading = false
             alert('下载完成！')
             return false
           }
           this.progress+=10
        },250)
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.fileDemo-comp-ct {
  .path_li {
    text-align: left;
  }
  .c_button {
    margin: 2px;
  }
}
</style>
